<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="detailRegister"
    @close="drawerReset"
    width="1026"
    :showOkBtn="false"
    cancelText="关闭"
    showFooter
    isAbsolute
    getContainer=".page-wrapper"
  >
    <div class="box-drawer">
      <div class="drawer-table">
        <BasicTable @register="registerTable"> </BasicTable>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { BasicTable, useTable } from '@/components/Table'
import { ReloadOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { cloneDeep } from 'lodash-es'
import { message } from 'ant-design-vue'
import api from '@/api'

const { queryInviteUserList } = api

const emit = defineEmits(['register'])

const drawerState = reactive<{ record: any }>({
  record: {}
})

const [registerTable, { reload, setPagination, setTableData, setProps, getForm }] = useTable({
  api: queryInviteUserList,
  columns: [
    {
      title: '注册时间',
      dataIndex: 'createTime'
    },
    {
      title: '注册账号',
      dataIndex: 'phoneNumber'
    }
  ],
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: true }, // 只有一页时隐藏分页器
  useSearchForm: true,
  showIndexColumn: true,
  formConfig: {
    labelWidth: 60,
    baseColProps: {
      span: 8
    },
    schemas: [
      {
        field: 'phoneNumber',
        label: '注册账号',
        component: 'Input'
      }
    ]
  }
})

const [detailRegister, { closeDrawer, changeLoading }] = useDrawerInner((data) => {
  let record = cloneDeep(data.record)
  drawerState.record = record || {}
  setTableData([])
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })
  setProps({
    searchInfo: {
      userId: record.userId
    }
  })
  reload()
})

const drawerReset = () => {
  drawerState.record = {}
  const formData = getForm()
  formData.setFieldsValue({
    phoneNumber: ''
  })
}
</script>

<style lang="less" scoped>
.box-drawer {
  padding: 8px;
  :deep(.drawer-table) {
    .basic-table-form-container .ant-form {
      background: transparent;
      box-shadow: none;
      padding-top: 0;
    }
  }
}
</style>
